<template>
	<a-tabs class="tableDef" default-active-key="styles" size="small">
		<a-tab-pane key="styles" :tab="commonI18n('componentStyle.style','风格')">
			<!--标题和边框基础风格-->
			<component-style :curComponent="curComponent"></component-style>
			<a-form layout="vertical">
				<a-collapse default-active-key="1" :bordered="false">
					<template #expandIcon="props">
                        <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
					</template>
					<a-collapse-panel key="1" :header="tableI18n('headStyle','表头风格')">
						<a-row :gutter="24" style="margin: 0px">
							<a-col :span="12">
								<a-form-item :label="tableI18n('headerBackground','表头背景色')">
                                    <rx-color-picker v-model:value="config.styles.stylesHead.headBgColor" :placeholder="'表头背景色'"></rx-color-picker>
								</a-form-item>
							</a-col>
							<a-col :span="12">
								<a-form-item :label="tableI18n('fontStyle','字体风格')">
									<a-select v-model:value="config.styles.stylesHead.fontStyle">
										<a-select-option value="normal">{{commonI18n('componentStyle.normal','正常')}}</a-select-option>
										<a-select-option value="bold">{{commonI18n('componentStyle.bold','加粗')}}</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
						</a-row>
						<a-row :gutter="24" style="margin: 0px">
							<a-col :span="12">
								<a-form-item :label="commonI18n('componentStyle.fontColor','字体颜色')">
                                    <rx-color-picker v-model:value="config.styles.stylesHead.fontColor" :placeholder="commonI18n('componentStyle.fontColor','字体颜色')"></rx-color-picker>
								</a-form-item>
							</a-col>
							<a-col :span="12">
								<a-form-item :label="commonI18n('componentStyle.fontSize','字体大小')">
									<a-input v-model:value="config.styles.stylesHead.fontSize" type="number"/>
								</a-form-item>
							</a-col>
						</a-row>
					</a-collapse-panel>
					<a-collapse-panel key="2" :header="tableI18n('dataDesign','数据列设计')">
						<a-row :gutter="24" style="margin: 0px">
							<a-col :span="12">
								<a-form-item :label="tableI18n('columnDivider','列分隔线')">
									<a-switch default-checked v-model:checked="config.styles.stylesCommon.cutOffRuleShow" size="small"/>
								</a-form-item>
							</a-col>
							<a-col :span="12">
								<a-form-item :label="tableI18n('dividerColor','分隔线颜色')">
									<rx-color-picker v-model:value="config.styles.stylesCommon.cutOffRuleColor"></rx-color-picker>
								</a-form-item>
							</a-col>
						</a-row>
						<a-row :gutter="24" style="margin: 0px">
							<a-col :span="12">
								<a-form-item :label="commonI18n('componentStyle.fontColor','字体颜色')">
                                    <rx-color-picker v-model:value="config.styles.stylesCommon.fontColor"></rx-color-picker>
								</a-form-item>
							</a-col>
							<a-col :span="12">
								<a-form-item :label="commonI18n('componentStyle.fontSize','字体大小')">
									<a-input style="width: 100%" v-model:value="config.styles.stylesCommon.fontSize" type="number"/>
								</a-form-item>
							</a-col>
						</a-row>
						<a-row :gutter="24" style="margin: 0px">
							<a-col :span="12">
								<a-form-item :label="tableI18n('breakSentence','断句')" >
									<a-select v-model:value="config.styles.stylesCommon.listDiction">
										<a-select-option value="0">
											{{tableI18n('lineDisplay','换行显示')}}
										</a-select-option>
										<a-select-option value="1">
											{{tableI18n('oneLine','一行显示')}}
										</a-select-option>
										<a-select-option value="2">
											{{tableI18n('twoLine','二行显示')}}
										</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
							<a-col :span="12">
								<a-form-item :label="commonI18n('componentStyle.alignmentMode','对齐方式')">
                                    <div class="componentStyle-textAlign">
                                        <div class="componentStyle-textAlign-icon"
                                             @click="config.styles.stylesCommon['listAligning']='left'"
                                             :class="[config.styles.stylesCommon['listAligning']=='left'?'componentStyle-textAlign-hover':'']">
                                            <rx-icon-show icon="icon-linezuoduiqi2"/>
                                        </div>
                                        <div class="componentStyle-textAlign-icon"
                                             @click="config.styles.stylesCommon['listAligning']='center'"
                                             :class="[config.styles.stylesCommon['listAligning']=='center'?'componentStyle-textAlign-hover':'']">
                                            <rx-icon-show icon="icon-linejuzhongduiqi2"/>
                                        </div>
                                        <div class="componentStyle-textAlign-icon"
                                             @click="config.styles.stylesCommon['listAligning']='right'"
                                             :class="[config.styles.stylesCommon['listAligning']=='right'?'componentStyle-textAlign-hover':'']">
                                            <rx-icon-show icon="icon-lineyouduiqi2"/>
                                        </div>
                                    </div>
								</a-form-item>
							</a-col>
						</a-row>
						<a-row :gutter="24" style="margin: 0px">
							<a-col :span="12">
								<a-form-item :label="tableI18n('zebraStripes','斑马纹')" >
									<a-switch default-checked v-model:checked="config.styles.stylesCommon.listZebraShow" size="small"/>
								</a-form-item>
							</a-col>
							<a-col :span="12">
								<a-form-item :label="tableI18n('zebraColor','斑马颜色')" >
									<rx-color-picker v-model:value="config.styles.stylesCommon.listZebraColor"></rx-color-picker>
								</a-form-item>
							</a-col>
						</a-row>
						<a-row :gutter="24" style="margin: 0px">
							<a-col :span="12">
								<a-form-item :label="tableI18n('paging','分页')">
									<a-switch default-checked v-model:checked="config.styles.stylesCommon.paging" size="small"/>
									<a-input v-if="config.styles.stylesCommon.paging" v-model:value="config.styles.stylesCommon.pageSize" type="number"/>
								</a-form-item>
							</a-col>
							<a-col :span="12">
								<a-form-item :label="tableI18n('serialNumber','序号')" >
									<a-switch default-checked v-model:checked="config.styles.stylesCommon.serial" size="small"/>
								</a-form-item>
							</a-col>
						</a-row>
						<a-row :gutter="24" style="margin: 0px">
							<a-col :span="12">
								<a-form-item :label="tableI18n('roll','滚动')" >
									<a-switch default-checked v-model:checked="config.styles.stylesCommon.roll" size="small"/>
								</a-form-item>
							</a-col>
							<a-col :span="12" v-if="config.styles.stylesCommon.roll">
								<a-form-item :label="tableI18n('rollingSpeed','滚动(完)速度')" >
									<a-input style="width: 100%" v-model:value="config.styles.stylesCommon.speed" type="number"/>
								</a-form-item>
							</a-col>
						</a-row>
					</a-collapse-panel>
				</a-collapse>
				<div class="chart-enlarge">
					<span>{{i18n('screen','是否全屏')}}</span>
					<a-switch v-model:checked="config.styles.fullScreenShow" size="small" />
				</div>
			</a-form>
		</a-tab-pane>
		<a-tab-pane key="dataSources" :tab="commonI18n('componentStyle.data','数据')" style="height: 100%">
			<div style="display: flex;flex-direction: column;height: 100%;overflow:hidden;">
                <a-form-item :label="commonI18n('dataSource','数据来源')">
                    <a-radio-group v-model:value="config.dataSources.source"  default-value="dynamic">
                        <a-radio value="dynamic">{{commonI18n('dynamicData','动态数据')}}</a-radio>
                        <a-radio value="static">{{commonI18n('staticData','静态数据')}}</a-radio>
                    </a-radio-group>
                </a-form-item>
                <div v-if="config.dataSources.source=='static'" style="margin:10px 0px 0px 10px">
                    <a-button  @click="setStaticData" style="margin-right: 5px;">{{commonI18n('config','配置')}}</a-button>
                    <a-tag color="green" v-if="config.dataSources.staticData">{{commonI18n('configured','已配置')}}</a-tag>
                    <a-tag color="red" v-else>{{commonI18n('notConfigured','未配置')}}</a-tag>
                </div>
                <div v-else class="dataSources-common">
                    <!--配置项-->
                    <div class="dataSources-common-left">
                        <!--维度设置-->
                        <div class="dimension" style="margin-top: 20px">{{tableI18n('columnHead','列头')}}</div>
                        <div class="dimension_come">
                            <vuedraggable class="setup"  v-model="config.dataSources.dimensions"
                                          :group="{name: 'site',pull:'clone'}" animation="300"  dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass">
                                <template #item="{ element:item,index }">
                                    <div class="setup_tuo" @mouseenter="mouseenter(index)"
                                         @mouseleave="mouseleave()"  :key="item.fieldName">
                                        <rx-icon-show :icon="getIcon(item)" style="float:left;margin-top: 3px"></rx-icon-show>
                                        <span class="inpurlistspan" :title="item.fieldLabel">{{item.fieldLabel}}</span>
                                        <span class="icon_config" v-if="columnIndex ==index">
                                        <rx-icon-show icon="icon-lineshang" @click="toUp(config.dataSources.dimensions,index)"></rx-icon-show>
                                        <rx-icon-show icon="icon-linexia" @click="toDown(config.dataSources.dimensions,index)"></rx-icon-show>
                                        <rx-icon-show icon="icon-lineVue3_setting" @click="setSetting(item,index,'dimensions')"  />
                                        <rx-icon-show icon="icon-lineVue3_delete" @click="config.dataSources.dimensions.splice(index,1)"></rx-icon-show>
									</span>
                                    </div>
                                </template>
                            </vuedraggable>
                            <div class="dimension_button">{{tableI18n('dragRight','从右侧拖入列头')}}</div>
                        </div>
                        <div>
                            <result-row-config v-model="config.dataSources.resultNum"></result-row-config>
                        </div>
                    </div>
                    <div class="dataSources-common-right">
                        <!--数据模型-->
                        <data-model
                            :dataModel="dataModel"
                            :config="config"
                            :modelConfig="modelConfig"
                            :getDataModel="getDataModel"
                            :dimensionStart="dimensionStart"
                            :dimensionEnd="dimensionEnd"
                            :measureEnd="measureEnd"
                            :measureStart="measureStart"
                            groupName="site"
                        ></data-model>
                    </div>
                </div>
            </div>
		</a-tab-pane>
		<a-tab-pane key="advancedConf" :tab="commonI18n('componentStyle.advanced','高级')" v-if="config.dataSources.source!='static'">
			<table-advanced :config="config"></table-advanced>
			<!--筛选-->
			<ChartAdvConfig :table="true"></ChartAdvConfig>
			<!--刷新配置-->
			<refresh-config></refresh-config>
			<!--表格预警-->
			<a-collapse default-active-key="1" :bordered="false">
				<template #expandIcon="props">
                    <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
				</template>
				<a-collapse-panel key="1" :header="tableI18n('formWarning','表格预警')">
					<a-radio-group @change="change" v-model:value="config.advancedConf.fullScreenShow">
						<a-radio :value="true">
							{{tableI18n('tableRowFilling','表格行填充')}}
						</a-radio>
						<a-radio :value="false">
							{{tableI18n('tableCellFill','表格单元格填充')}}
						</a-radio>
					</a-radio-group>
					<a-button type="primary" style="width: 100%;margin-top: 20px" @click="addForewarning" ghost>
						<rx-icon-show icon="icon-lineVue3_add"/>{{tableI18n('addTitle','添加')}}
					</a-button>
				</a-collapse-panel>
			</a-collapse>
		</a-tab-pane>
	</a-tabs>
</template>

<script>
/**
 * 表格组件
 */
import ComponentDef from "@/views/modules/design/right-component/common/component-def.js";
import DataModel from "./common/data-model.vue";
import vuedraggable from "vuedraggable";
import TableAdvanced from "./common/table-advanced.vue"
import refreshConfig from "./common/refresh-config.vue"
import ChartAdvConfig from "./common/chart-adv-config.vue"
import resultRowConfig from "./common/result-row-config.vue";
import tableForewarning from "./common/table-forewarning.vue"
import {Util,RxColorPicker} from '@lowcode/jpaas-base-lib';

export default {
	name: "TableDef",
	mixins:[ComponentDef],
	components:{
		DataModel,
		vuedraggable,
		TableAdvanced,
		refreshConfig,
		resultRowConfig,
		ChartAdvConfig,
        RxColorPicker
	},
	data() {
		return {
			columnIndex:null,
			MrChildrenId:'',
			parentId:'',
			forewarningConfig:[]
		}
	},
	created() {
		if(this.config.dataSources.dataModel){
			this.getDataModel(this.config.dataSources.dataModel,false);
		}
		if(!this.config.styles.fullScreenShow){
            this.config.styles["fullScreenShow"]=false;
		}
		//预警行还是单个
		if(!this.config.advancedConf.forewarningShow){
            this.config.advancedConf["forewarningShow"]=false;
		}
		if(!this.config.advancedConf.forewarningConfig){
            this.config.advancedConf["forewarningConfig"]=this.forewarningConfig;
		}
	},
	methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "chartLang.common", key);
        },
		tableI18n(name,text,key){
			return this.$ti18(name,text,"tableLang",key);
		},
		//鼠标移上去显示删除维度设置
		mouseenter(index){
			this.columnIndex=index;
		},
		mouseleave(){
			this.columnIndex=null;
		},
		dimensionStart(index){
			this.parentId = index;
		},
		dimensionEnd(e){
			this.MrChildrenId = e.oldIndex;
			let index = 0;
			let list = []
			this.modelConfig.dimensions[0].fields.filter(res=>{
				if(!res.hide){
					list.push(res)
				}
			})
			for (let obj of this.config.dataSources.dimensions) {
				if (list[this.MrChildrenId].fieldName == obj.fieldName && list[this.MrChildrenId].tableName == obj.tableName) {
					index++;
				}
			}
			if (index >= 2) {
				this.config.dataSources.dimensions.splice(e.newIndex, 1);
				this.$notification.open({
					message:this.tableI18n('dragPrompt','拖拉提示'),
					description:this.tableI18n('notRepeat','不可重复拖拉'),
					onClick: () => {

					},
				});
			}
		},
		measureEnd(e){
			this.MrChildrenId = e.oldIndex;
			let index = 0;
			let list = []
			this.modelConfig.measures[0].fields.filter(res=>{
				if(!res.hide){
					list.push(res)
				}
			})
			for (let obj of this.config.dataSources.dimensions) {
				if (list[this.MrChildrenId].fieldName == obj.fieldName && list[this.MrChildrenId].tableName == obj.tableName) {
					index++;
				}
			}
			if (index >= 2) {
				this.config.dataSources.dimensions.splice(e.newIndex, 1);
				this.$notification.open({
					message:this.tableI18n('dragPrompt','拖拉提示'),
					description: this.tableI18n('notRepeat','不可重复拖拉'),
					onClick: () => {

					},
				});
			}
		},
		measureStart(index){
		},
		//添加表格预警
		addForewarning(){
			let self = this;
			let conf = {
				curVm: this,
				component: tableForewarning,
				title:this.i18n('forewarning','表格数据预警'),
				widthHeight: ['1000px', '500px'],
				zIndex:1000,
				data: {
					forewarningConfig: this.config.advancedConf.forewarningConfig,
					dimensions:this.config.dataSources.dimensions,
					fullScreenShow:this.config.advancedConf.fullScreenShow
				}
			};
			Util.open(conf, function (action, data) {
				if (action != 'ok') return;
                self.config.advancedConf["forewarningConfig"]=data;
			});
		},
		change(e){
            this.config.advancedConf["forewarningConfig"]=[];
		},
	},
	watch: {}
}
</script>

<style scoped>
.chart-enlarge{
	display: flex;
}
.chart-enlarge span{
	flex: 1;
	color: rgba(0, 0, 0, 0.85);
}
.tableDef >>> .ant-tabs-bar{
	margin-bottom: 0px!important;
}
.dataSources-common{
	width: 100%;
	flex: 1;
	display: flex;
    border: 1px solid #dadde0;
    border-radius: 10px;
    overflow: auto;
}
.dataSources-common-left {
    flex: 1;
    padding:10px;
    border-right: 1px solid #dadde0;
    overflow: auto;
}

.dataSources-common-right {
    flex: 1;
    overflow: auto;
    padding:10px;
}

.dataSources-common-right::-webkit-scrollbar-thumb {
    display: none;
}

.dataSources-common-right:hover::-webkit-scrollbar-thumb {
    display: block;
}
.dimension_come{
	margin-top: 13px;
	min-height: 90px;
	background-color: #ffffff;
	border-radius: 4px;
	border: dashed 1px #dadde0;
	padding-top: 15px;
	position: relative;
}
.setup_tuo{
	background-color: #02c5b7;
	border-radius: 2px;
	display: flex;
	line-height: 26px;
	padding: 0 7px;
	color: white;
	margin-bottom: 5px;
	height: 30px;
}
.inpurlistspan{
	float: left;
	border: none;
	background: none;
	color: white;
    margin: 0px 0px 0px 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	font-size: 14px;
	line-height: 30px;
	flex: 1;
}
.setup{
	margin-top: -14px;
	padding: 7px;
}
.setup >span{
	display: block;
	min-height: 90px;
}
.componentStyle-textAlign{
	display: flex;
	height: 31px;
	border-radius: 4px;
	border: solid 1px #dedede;
	align-items: center;
	justify-items: center;
}
.componentStyle-textAlign-icon{
	flex: 1;
	height: 31px;
	font-size: 20px;
	text-align: center;
	cursor: pointer;
	border-right: solid 1px #dedede
}
.componentStyle-textAlign-hover{
	color: #4285f4;
}
.componentStyle-textAlign-icon:hover{
	color:#4285f4;
}
.componentStyle-textAlign-icon:nth-child(3){
	border: none;
}
.dimension_button{
	line-height: 30px;
	text-align: center;
	height: 30px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #c0c5cc;
	padding: 0px 10px;
}
.icon_config {
    display: flex;
    align-items: center;
    grid-gap: 0px 10px;
    cursor: pointer
}
</style>
